<template>
    <div>
        <el-form>
            <el-form-item>
                <el-button type="primary" @click="add">新增</el-button>
                <el-button type="primary" @click="update">修改</el-button>
                <el-button type="primary" @click="exportExcel">导出</el-button>
            </el-form-item>
        </el-form>
        <el-divider></el-divider>
        <el-form ref="form" :model="params" label-width="80px">
            <el-container>
                <el-form-item label="审批状态">
                    <el-select v-model="params.approveStatus" placeholder="请选择活动区域">
                        <el-option label="审批中" value="1"></el-option>
                        <el-option label="审批拒绝" value="2"></el-option>
                        <el-option label="审批通过" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">模糊搜索</el-button>
                </el-form-item>
            </el-container>
        </el-form>

        <template>
            <el-table
                    :data="pageResult.records"
                    style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="序号">
                </el-table-column>
                <el-table-column
                        prop="pId" v-show="false">
                </el-table-column>
                <el-table-column
                        prop="projectName"
                        label="项目名称">
                </el-table-column>
                <el-table-column
                        prop="materialName"
                        label="设备名称">
                </el-table-column>
                <el-table-column
                        prop="unit"
                        label="单位">
                </el-table-column>
                <el-table-column
                        prop="unitModel"
                        label="规格型号">
                </el-table-column>
                <el-table-column
                        prop="userRealname"
                        label="申请人">
                </el-table-column>
                <el-table-column
                        prop="deptName"
                        label="部门">
                </el-table-column>
                <el-table-column
                        prop="updateDate"
                        label="申请日期">
                </el-table-column>
                <el-table-column
                        prop="house"
                        label="时长">
                </el-table-column>
                <el-table-column
                        prop="userDate"
                        label="使用日期">
                </el-table-column>
                <el-table-column
                        prop="approveStatus"
                        label="流程状态">
                    <template slot-scope="scope">
                        {{scope.row.approveStatus == 1 ? '审批中':(scope.row.approveStatus == 2?'审批不通过':'审批通过' )}}
                    </template>
                </el-table-column>
            </el-table>
<div id="importDiv">


            <el-table
                    id="aa"
                    v-show="false"
                    :data="exportData"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="序号">
                </el-table-column>
                <el-table-column
                        prop="pId" v-show="false">
                </el-table-column>
                <el-table-column
                        prop="projectName"
                        label="项目名称">
                </el-table-column>
                <el-table-column
                        prop="materialName"
                        label="设备名称">
                </el-table-column>
                <el-table-column
                        prop="unit"
                        label="单位">
                </el-table-column>
                <el-table-column
                        prop="unitModel"
                        label="规格型号">
                </el-table-column>
                <el-table-column
                        prop="userRealname"
                        label="申请人">
                </el-table-column>
                <el-table-column
                        prop="deptName"
                        label="部门">
                </el-table-column>
                <el-table-column
                        prop="updateDate"
                        label="申请日期">
                </el-table-column>
                <el-table-column
                        prop="house"
                        label="时长">
                </el-table-column>
                <el-table-column
                        prop="userDate"
                        label="使用日期">
                </el-table-column>
                <el-table-column
                        prop="approveStatus"
                        label="流程状态">
                    <template slot-scope="scope">
                        {{scope.row.approveStatus == 1 ? '审批中':(scope.row.approveStatus == 2?'审批不通过':'审批通过' )}}
                    </template>
                </el-table-column>
            </el-table>
</div>
        </template>

        <el-footer class="case-exam-footer">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="pageResult.total"
                    :page-size="pageResult.size"
                    class="pagination"
                    @current-change="handleIndexChange"
            >
            </el-pagination>
        </el-footer>
    </div>
</template>

<script>
    import  XLSX from 'xlsx'
    import  FileSaver from 'file-saver'
    import DeviceCollectService from '../../../model/mfy/DeviceCollectService.js'
    const deviceCollectService=DeviceCollectService.getInstance();
    export default {
        name: "DeviceRequireList",
        data(){
            return{
                params:{},
                pageResult:{},
                exportData:[],
                multipleSelection:[],
            }
        },
        methods:{
            list(){
                deviceCollectService.list(this.params).then((response)=>{
                    this.pageResult=response.data.data;
                })
            },
            listNopage(){
                deviceCollectService.listNopage(this.params).then((response)=>{
                    this.exportData=response.data.data;
                })
            },
            handleIndexChange(index){
                this.params.page = index
                this.list()
            },
            search(){
                this.params.page=1
                this.list()
                this.listNopage();
            },
            handleSelectionChange(val) {
                this.multipleSelection=val
            },
            add(){
                this.$router.push({name:"deviceCollect"})
            },
            update(){
                if(this.multipleSelection.length>1){
                    this.$message.error("只能选择一个!");
                    this.multipleSelection=[]
                    return;
                }
                if(this.multipleSelection.length<1){
                    this.$message.error("请选择要修改的信息!");
                    this.multipleSelection=[]
                    return;
                }
                this.multipleSelection.push({
                    'label':'修改'
                })
                this.$router.push({name:"deviceCollect",params:{search:this.multipleSelection}})
            },
            exportExcel(){
                let fix = document.querySelector('#importDiv .el-table__fixed');
                let wb;
                if(fix){ //判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
                    wb = XLSX.utils.table_to_book(document.querySelector('#importDiv #aa').removeChild(fix));
                    document.querySelector('#importDiv #aa').appendChild(fix);
                }else{
                    wb = XLSX.utils.table_to_book(document.querySelector('#importDiv #aa'));
                }
                let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
                try {
                    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '设备油耗.xlsx')
                } catch (e) {
                    if (typeof console !== 'undefined') console.log(e, wbout)
                }
                return wbout
            },
        },
        created() {
            this.list()
            this.listNopage()
        },
        watch : {
            '$route' () {
                this.list()
                this.listNopage()
                this.multipleSelection=[];
            }
        },

    }
</script>

<style scoped>

</style>